<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <ul>
        <li>第1个</li>
        <li>第2个</li>
        <li id="ii">第3个</li>
        <li>第4个</li>
        <li>第5个</li>
        <li>第6个</li>
        <li>第7个</li>
        <li>第8个</li>
        <li>第9个</li>
        <li>第10个</li>
    </ul>
    <script src="./js/jquery.min.js"></script>
    <script>
        /* 
            JS
                克隆
                    clone       =>  普通的克隆
                    clone(true)     =>  克隆子元素
            JQ
                克隆
                    clone()     => 普通的克隆
                    clone(true) => 可以克隆事件
                repleaceWidht   => 替换
                    老东西.repleaceWidht(新东西)
                repleaceAll
                    新东西.repleaceAll(老东西)
        */
        //创建一个元素
        let li = $("<li>文渊</li>")
        //repleaceWidht替换元素
        // $("li:eq(7)").replaceWith(li)
        //repleaceAll替换元素
        // $(li).replaceAll($("li:eq(2)"))


        $("#ii").click(function(){
            alert("333333")
        })


        /* 普通克隆,不能克隆事件 */
        // let ulC = $("ul").clone()

        /* 带true的克隆 */
        let ulC = $("ul").clone(true)
        /* 追加到Body里面 */
        $("body").append(ulC)
    </script>
</body>

</html>